<template>
	<view class="order-list-container">
		<!-- 导航栏 -->
		<nav-bar title="我的订单"></nav-bar>

		<!-- 页面内容 -->
		<view class="page-content has-nav-bar">
			<!-- 顶部导航 -->
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: currentTab === tab.type }" @click="switchTab(tab.type)">
					{{ tab.name }}
				</view>
			</view>

			<!-- 搜索框 -->
			<view class="search-box">
				<view class="search-input">
					<image src="/static/search-icon.png" mode="aspectFit" class="search-icon"></image>
					<input type="text" placeholder="搜索我的订单" v-model="searchKey" @confirm="searchOrder" />
				</view>
				<view class="filter-btn">
					<image src="/static/filter-icon.png" mode="aspectFit"></image>
					<text>筛选</text>
				</view>
			</view>

			<!-- 订单列表 -->
			<scroll-view scroll-y="true" class="order-list" @scrolltolower="loadMoreOrders" refresher-enabled="true"
				:refresher-triggered="refreshing" @refresherrefresh="refreshOrders">
				<block v-if="orderList.length > 0">
					<view class="order-item" v-for="(order, index) in orderList" :key="index"
						@click="goToDetail(order.id)">
						<!-- 店铺信息 -->
						<view class="shop-info">
							<view class="shop-left">
								<view class="shop-tag" v-if="order.shopTag">{{ order.shopTag }}</view>
								<text class="shop-name">{{ order.shopName }}</text>
							</view>
							<text class="order-status">{{ order.statusText }}</text>
						</view>

						<!-- 商品信息 -->
						<view class="product-list">
							<view class="product-item" v-for="(product, pidx) in order.products" :key="pidx">
								<image :src="product.image" mode="aspectFill" class="product-image"></image>
								<view class="product-info">
									<view class="product-name">{{ product.name }}</view>
									<view class="product-spec">{{ product.spec }}</view>
									<view class="product-price-count">
										<text class="product-price">¥{{ product.price.toFixed(2) }}</text>
										<text class="product-count">x{{ product.count }}</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 订单合计 -->
						<view class="order-total">
							<view class="order-payment">
								<text>共{{ order.productCount }}件商品 合计：</text>
								<text class="total-price">¥{{ order.totalAmount.toFixed(2) }}</text>
							</view>
						</view>

						<!-- 订单操作 -->
						<view class="order-actions">
							<view class="action-btns">
								<button v-for="(btn, bidx) in getOrderButtons(order.status)" :key="bidx"
									class="action-btn" :class="{ 'primary-btn': btn.isPrimary }"
									@click.stop="handleOrderAction(btn.action, order.id)">
									{{ btn.text }}
								</button>
							</view>
						</view>
					</view>
				</block>

				<!-- 空状态 -->
				<view class="empty-state" v-if="orderList.length === 0 && !loading">
					<image src="/static/empty-cart.png" mode="aspectFit" class="empty-icon"></image>
					<text class="empty-text">暂无订单~</text>
					<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
				</view>

				<!-- 加载更多 -->
				<view class="loading-more" v-if="loading && orderList.length > 0">
					<text>正在加载更多...</text>
				</view>

				<!-- 加载结束 -->
				<view class="no-more" v-if="!hasMore && orderList.length > 0 && !loading">
					<text>没有更多订单了~</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
	components: {
		NavBar
	},
	data() {
		return {
			tabs: [
				{ name: '全部', type: 'all' },
				{ name: '待付款', type: 'unpaid' },
				{ name: '待发货', type: 'unshipped' },
				{ name: '待收货', type: 'unreceived' },
				{ name: '待评价', type: 'unrated' },
				{ name: '已完成', type: 'completed' }
			],
			currentTab: 'all',
			searchKey: '',
			orderList: [],
			page: 1,
			limit: 10,
			hasMore: true,
			loading: false,
			refreshing: false,
			// 模拟订单数据，实际应该从API获取
			mockOrders: [
				{
					id: '1001',
					shopName: '达尔优京东自营旗舰店',
					shopTag: 'JD',
					statusText: '已完成',
					status: 'completed',
					products: [
						{
							id: 'p1001',
							name: '狗粮',
							spec: '黑色',
							price: 74.00,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/169589/12/39526/53939/642a4337F7f7e1d5b/11e5631d5f02a547.jpg'
						}
					],
					productCount: 1,
					totalAmount: 74.00,
					createTime: '2023-05-20 10:30:45'
				},
				{
					id: '1002',
					shopName: '好奇京东自营旗舰店',
					shopTag: 'JD',
					statusText: '已完成',
					status: 'completed',
					products: [
						{
							id: 'p1002',
							name: '好奇(Huggies) 铂金装成长裆XL96片(12-17kg)加大号婴儿纸尿裤',
							spec: 'XL96片',
							price: 114.00,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/142035/35/42159/64473/6503bc84Ffd41a7f1/f4e30eed4b4bcc67.jpg'
						}
					],
					productCount: 1,
					totalAmount: 114.00,
					createTime: '2023-05-18 14:22:10'
				},
				{
					id: '2001',
					shopName: '皇家宠物食品旗舰店',
					shopTag: 'JD',
					statusText: '待付款',
					status: 'unpaid',
					products: [
						{
							id: 'p2001',
							name: '皇家Royal Canin 幼犬狗粮 小型犬奶糕 怀孕母犬离乳期MIS30 1kg',
							spec: '1kg',
							price: 125.00,
							count: 2,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/142035/35/42159/64473/6503bc84Ffd41a7f1/f4e30eed4b4bcc67.jpg'
						}
					],
					productCount: 2,
					totalAmount: 250.00,
					createTime: '2023-06-10 09:15:30'
				},
				{
					id: '2002',
					shopName: '宠物医疗用品专营店',
					shopTag: 'JD',
					statusText: '待发货',
					status: 'unshipped',
					products: [
						{
							id: 'p2002',
							name: '宠物狗狗体外驱虫药 犬用大中型犬体外驱虫滴剂 单支装',
							spec: '单支装 10-20kg犬用',
							price: 75.00,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/142035/35/42159/64473/6503bc84Ffd41a7f1/f4e30eed4b4bcc67.jpg'
						}
					],
					productCount: 1,
					totalAmount: 75.00,
					createTime: '2023-06-05 16:20:15'
				},
				{
					id: '2003',
					shopName: '宠物零食专营店',
					shopTag: 'JD',
					statusText: '待收货',
					status: 'unreceived',
					products: [
						{
							id: 'p2003',
							name: '狗狗零食大礼包 磨牙洁齿骨咬胶 泰迪金毛训练奖励小型犬零食',
							spec: '混合口味 500g',
							price: 49.90,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/142035/35/42159/64473/6503bc84Ffd41a7f1/f4e30eed4b4bcc67.jpg'
						}
					],
					productCount: 1,
					totalAmount: 49.90,
					createTime: '2023-06-01 11:05:40'
				},
				{
					id: '2004',
					shopName: '宠物玩具专营店',
					shopTag: 'JD',
					statusText: '待评价',
					status: 'unrated',
					products: [
						{
							id: 'p2004',
							name: '宠物玩具球 耐咬橡胶磨牙球 狗狗互动训练玩具',
							spec: '蓝色 中号',
							price: 39.90,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/142035/35/42159/64473/6503bc84Ffd41a7f1/f4e30eed4b4bcc67.jpg'
						}
					],
					productCount: 1,
					totalAmount: 39.90,
					createTime: '2023-05-25 14:30:20'
				},
				{
					id: '2005',
					shopName: '宠物医疗用品专营店',
					shopTag: 'JD',
					statusText: '已完成',
					status: 'completed',
					products: [
						{
							id: 'p2005',
							name: '猫咪专用指甲剪 宠物指甲钳猫爪剪',
							spec: '粉色',
							price: 25.80,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/142035/35/42159/64473/6503bc84Ffd41a7f1/f4e30eed4b4bcc67.jpg'
						}
					],
					productCount: 1,
					totalAmount: 25.80,
					createTime: '2023-05-15 10:10:10'
				},
				{
					id: '1003',
					shopName: 'JD 京东',
					shopTag: '',
					statusText: '已取消',
					status: 'canceled',
					products: [
						{
							id: 'p1003',
							name: '商品名称商品名称商品名称',
							spec: '规格',
							price: 933.00,
							count: 3,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/223658/7/24943/160146/642d374dF05e32dc0/f23b137d0daaa752.jpg'
						}
					],
					productCount: 3,
					totalAmount: 2799.00,
					createTime: '2023-05-15 09:10:32'
				},
				{
					id: '1004',
					shopName: 'JD 京东',
					shopTag: '',
					statusText: '已取消',
					status: 'canceled',
					products: [
						{
							id: 'p1004',
							name: '商品名称商品名称商品名称',
							spec: '规格',
							price: 933.00,
							count: 3,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/223658/7/24943/160146/642d374dF05e32dc0/f23b137d0daaa752.jpg'
						}
					],
					productCount: 3,
					totalAmount: 2799.00,
					createTime: '2023-05-12 16:45:20'
				},
				{
					id: '1005',
					shopName: 'JD Apple产品京东自营旗舰店',
					shopTag: '',
					statusText: '已取消',
					status: 'canceled',
					products: [
						{
							id: 'p1005',
							name: 'Apple苹果 【24期免息】iPhone 15 Pro Max 256GB 蓝色钛金属 支持移动联通电信5G',
							spec: '256GB 蓝色钛金属',
							price: 8999.00,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/189092/20/39719/56010/650413f6Fa5dacc88/bd39c04a3bc074c5.jpg'
						}
					],
					productCount: 1,
					totalAmount: 8999.00,
					createTime: '2023-05-10 11:30:40'
				},
				{
					id: '1006',
					shopName: '瑞幸咖啡官方旗舰店',
					shopTag: '',
					statusText: '已消费',
					status: 'used',
					products: [
						{
							id: 'p1006',
							name: 'luckin coffee校园口由卡【全国通用】30天 会员卡 官方电子券兑换券',
							spec: '30天',
							price: 0.10,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/139928/30/33649/56307/646a06fcF3f10cb4e/d4e5e2ce66aaea29.png'
						}
					],
					productCount: 1,
					totalAmount: 0.10,
					createTime: '2023-05-08 08:20:15'
				},
				{
					id: '1007',
					shopName: 'JD 京东互联网医院',
					shopTag: '',
					statusText: '已完成',
					status: 'completed',
					products: [
						{
							id: 'p1007',
							name: '雷明 中西结合科 主治医师 家阜堂中医院',
							spec: '',
							price: 0.00,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/180161/40/32466/123633/63e4953fFe2e7ec3e/0f27ab67c85c97dc.png'
						}
					],
					productCount: 1,
					totalAmount: 0.00,
					createTime: '2023-05-05 15:40:22'
				},
				{
					id: '1008',
					shopName: '伊利牛奶京东自营旗舰店',
					shopTag: 'JD',
					statusText: '完成',
					status: 'completed',
					products: [
						{
							id: 'p1008',
							name: '伊利安慕希希腊风味酸奶原味205g*16盒牛奶',
							spec: '205g*16盒',
							price: 39.90,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/170895/32/40423/152295/642a5ef8F09bade71/0f3370920edadcda.jpg'
						}
					],
					productCount: 1,
					totalAmount: 39.90,
					createTime: '2023-05-01 09:25:18'
				}
			]
		};
	},
	onLoad(options) {
		// 如果有传入订单类型，切换到对应标签
		if (options.type) {
			this.currentTab = options.type;
		}

		// 加载订单数据
		this.loadOrders();
	},
	methods: {
		// 切换标签
		switchTab(tabType) {
			if (this.currentTab === tabType) return;
			this.currentTab = tabType;
			this.orderList = [];
			this.page = 1;
			this.hasMore = true;
			this.loadOrders();
		},

		// 加载订单数据
		loadOrders() {
			if (this.loading) return;
			this.loading = true;

			// 模拟API请求
			setTimeout(() => {
				// 根据当前标签过滤订单
				let filteredOrders = this.mockOrders;
				if (this.currentTab !== 'all') {
					// 按订单状态过滤
					filteredOrders = this.mockOrders.filter(order => {
						if (this.currentTab === 'unpaid') {
							return order.status === 'unpaid';
						} else if (this.currentTab === 'unshipped') {
							return order.status === 'unshipped';
						} else if (this.currentTab === 'unreceived') {
							return order.status === 'unreceived';
						} else if (this.currentTab === 'unrated') {
							return order.status === 'unrated';
						} else if (this.currentTab === 'completed') {
							return order.status === 'completed';
						}
						return true;
					});
				}

				// 模拟分页
				const start = (this.page - 1) * this.limit;
				const end = this.page * this.limit;
				const pageData = filteredOrders.slice(start, end);

				// 添加到列表
				this.orderList = [...this.orderList, ...pageData];

				// 更新是否有更多数据
				this.hasMore = end < filteredOrders.length;

				this.loading = false;
				this.refreshing = false;
			}, 500);
		},

		// 加载更多
		loadMoreOrders() {
			if (!this.hasMore || this.loading) return;
			this.page++;
			this.loadOrders();
		},

		// 下拉刷新
		refreshOrders() {
			this.refreshing = true;
			this.orderList = [];
			this.page = 1;
			this.hasMore = true;
			this.loadOrders();
		},

		// 搜索订单
		searchOrder() {
			if (!this.searchKey.trim()) return;
			this.orderList = [];
			this.page = 1;

			// 模拟搜索结果
			setTimeout(() => {
				const searchResult = this.mockOrders.filter(order => {
					// 搜索订单号、商品名称或店铺名称
					return order.id.includes(this.searchKey) ||
						order.shopName.includes(this.searchKey) ||
						order.products.some(p => p.name.includes(this.searchKey));
				});

				this.orderList = searchResult.slice(0, this.limit);
				this.hasMore = searchResult.length > this.limit;
				this.loading = false;
			}, 500);
		},

		// 获取订单按钮
		getOrderButtons(status) {
			const buttons = [];

			switch (status) {
				case 'unpaid': // 待付款
					buttons.push({ text: '取消订单', action: 'cancel', isPrimary: false });
					buttons.push({ text: '去支付', action: 'pay', isPrimary: true });
					break;
				case 'unshipped': // 待发货
					buttons.push({ text: '提醒发货', action: 'remind', isPrimary: false });
					buttons.push({ text: '取消订单', action: 'cancel', isPrimary: false });
					break;
				case 'unreceived': // 待收货
					buttons.push({ text: '查看物流', action: 'logistics', isPrimary: false });
					buttons.push({ text: '取消订单', action: 'cancel', isPrimary: false });
					buttons.push({ text: '确认收货', action: 'confirm', isPrimary: true });
					break;
				case 'unrated': // 待评价
					buttons.push({ text: '申请售后', action: 'service', isPrimary: false });
					buttons.push({ text: '去评价', action: 'rate', isPrimary: true });
					break;
				case 'completed': // 已完成
					buttons.push({ text: '申请售后', action: 'service', isPrimary: false });
					buttons.push({ text: '删除订单', action: 'delete', isPrimary: false });
					buttons.push({ text: '再次购买', action: 'rebuy', isPrimary: true });
					break;
				case 'canceled': // 已取消
					buttons.push({ text: '删除订单', action: 'delete', isPrimary: false });
					buttons.push({ text: '再次购买', action: 'rebuy', isPrimary: true });
					break;
				case 'used': // 已消费
					buttons.push({ text: '再次购买', action: 'rebuy', isPrimary: true });
					break;
				default:
					buttons.push({ text: '查看详情', action: 'detail', isPrimary: false });
			}

			return buttons;
		},

		// 处理订单操作
		handleOrderAction(action, orderId) {
			console.log('处理订单操作:', action, orderId);
			switch (action) {
				case 'cancel':
					uni.showModal({
						title: '提示',
						content: '确定要取消该订单吗？',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({ title: '订单已取消', icon: 'success' });
								// 这里应该调用取消订单API
							}
						}
					});
					break;
				case 'pay':
					uni.navigateTo({ url: `/pages/payment/index?orderId=${orderId}` });
					break;
				case 'delete':
					uni.showModal({
						title: '提示',
						content: '确定要删除该订单吗？',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({ title: '订单已删除', icon: 'success' });
								// 这里应该调用删除订单API
								// 删除成功后刷新列表
								this.refreshOrders();
							}
						}
					});
					break;
				case 'rebuy':
					uni.showToast({ title: '已加入购物车', icon: 'success' });
					// 这里应该调用加入购物车API
					break;
				case 'service':
					uni.navigateTo({ url: `/pages/after-sale/apply?orderId=${orderId}` });
					break;
				default:
					// 默认跳转到订单详情
					this.goToDetail(orderId);
			}
		},

		// 跳转到订单详情
		goToDetail(orderId) {
			uni.navigateTo({ url: `/pages/order/detail?id=${orderId}` });
		},

		// 去购物
		goShopping() {
			uni.switchTab({ url: '/pages/shop/index' });
		}
	}
}
</script>

<style lang="scss">
.order-list-container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.tabs {
	display: flex;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
	position: sticky;
	top: 0;
	z-index: 10;
	overflow-x: auto;
	white-space: nowrap;

	.tab-item {
		flex: 1;
		min-width: 120rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		padding: 24rpx 0;
		position: relative;

		&.active {
			color: #ff6600;
			font-weight: bold;

			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background-color: #ff6600;
				border-radius: 2rpx;
			}
		}
	}
}

.search-box {
	display: flex;
	padding: 20rpx 30rpx;
	background-color: #fff;

	.search-input {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 32rpx;
		padding: 0 20rpx;
		height: 64rpx;

		.search-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		input {
			flex: 1;
			height: 64rpx;
			font-size: 28rpx;
		}
	}

	.filter-btn {
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 4rpx;
		}

		text {
			font-size: 28rpx;
			color: #333;
		}
	}
}

.order-list {
	height: calc(100vh - 176rpx);
}

.order-item {
	margin: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.shop-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.shop-left {
			display: flex;
			align-items: center;

			.shop-tag {
				font-size: 22rpx;
				color: #fff;
				background-color: #e1251b;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}

			.shop-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}

		.order-status {
			font-size: 26rpx;
			color: #999;
		}
	}

	.product-list {
		padding: 20rpx 30rpx;

		.product-item {
			display: flex;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				background-color: #f5f5f5;
				flex-shrink: 0;
			}

			.product-info {
				flex: 1;
				margin-left: 20rpx;
				overflow: hidden;

				.product-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					line-height: 1.4;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.product-spec {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
				}

				.product-price-count {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.product-price {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}

					.product-count {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	.order-total {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f5f5f5;

		.order-payment {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 26rpx;
			color: #666;

			.total-price {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}
	}

	.order-actions {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f5f5f5;

		.action-btns {
			display: flex;
			justify-content: flex-end;

			.action-btn {
				margin-left: 20rpx;
				font-size: 26rpx;
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				background-color: #fff;
				color: #666;
				border: 1rpx solid #ddd;

				&.primary-btn {
					background-color: #ff6600;
					color: #fff;
					border: none;
				}
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.go-shopping-btn {
		background-color: #ff6600;
		color: #fff;
		font-size: 28rpx;
		padding: 0 60rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
}

.loading-more,
.no-more {
	text-align: center;
	padding: 30rpx 0;
	font-size: 26rpx;
	color: #999;
}
</style>